<template>
	<div class="header" :style="headerBackground">
		<x-header :title="title" :left-options="leftOptions" :right-options="rightOptions" @on-click-more="$store.commit('openSidemenu', true)"></x-header>
	</div>
</template>

<script>
import { XHeader } from 'vux'
export default {
	name: 'header',
	data () {
		return {
			showMenus: false
		}
	},
	props: ['opacity', 'title', 'leftOptions', 'rightOptions'],
	components: {
		XHeader
	},
	computed: {
		headerBackground () {
			return 'background-color: rgba(255, 255, 255, ' + (this.opacity || 1) + ');'
		}
	}
}
</script>

<style>
	body:before{content: '';display: block;height: 46px;}
	.header{position: fixed;left: 0;right:0;top: 0;z-index: 9;box-shadow: 0 0 10px #aaa;}
	.header .vux-header{background-color: transparent;padding: 0;height: 46px;}
	.header .vux-header .vux-header-title{color: #e22f0c;height: 46px;line-height: 46px;}
	.header .vux-header .vux-header-left .left-arrow:before{border-color: #e22f0c;}
	.header .vux-header .vux-header-right{right: 0;top: 0;width: 54px;height: 46px;line-height: 44px;text-align: center;}
	.header .vux-header .vux-header-right .vux-header-more{color: #e22f0c;margin: 0;width: 100%;height: 100%;}
	.header .vux-header .vux-header-right{right: 0;}
	.header span{display: block;overflow: hidden;text-overflow: ellipsis;width: 100%;}
	
</style>